<template>
  <a-spin :spinning="confirmLoading">
    <j-form-container :disabled="formDisabled">
      <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
        <a-card class="card"  :bordered="false" style="margin-top: -20px">
          <a-row>
            <a-col :span="8">
              <a-form-model-item label="品类" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="targetType">
                <j-dict-select-tag type="list" v-model="model.targetType" dictCode="target_type" placeholder="品类" />
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item label="EA参数名称" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="targetName">
                <a-input v-model="model.targetName" placeholder="名称"  ></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item label="交易品种" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="tradevariety">
                <a-select mode="multiple" style="width: 100%" placeholder="交易品种"  v-model="model.tradevariety" >
                  <a-select-option v-for="(item, index) in varietyOption" :key="item.key" :value="item.value">
                    {{ item.value }}
                  </a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-card>
        <a-card class="card" title="开仓设置" :bordered="false" style="margin-top: -20px">
          <div class="first" >
            <div class="first-list">
              <div class="list" >
                <div class="list-title">
                  开仓趋势
                </div>
              </div>
              <div class="list" >
                <div class="list-title">
                  开仓类型1:多单；2:空单；3:不限类型
                </div>
              </div>
              <div class="list" >
                <div class="list-title">
                  同一趋势下只开仓一次
                </div>
              </div>
              <div class="list" >
                <div class="list-title">
                  开仓固定手数
                </div>
              </div>
              <div class="list" >
                <div class="list-title">
                  开仓自动手数
                </div>
              </div>
              <div class="list" >
                <div class="list-title">
                  开仓手数自动计算比率（手/万$）
                </div>
              </div>
            </div>

            <div class="first-list" >
              <div class="list" >
                <div class="list-title" >
                  <a-form-model-item   prop="openTrendKind">
                    <a-switch v-model="model.openTrendKind"/>
                  </a-form-model-item>
                </div>
              </div>
              <div class="list" >
                <div class="list-title" style='width: 100%'>
                  <a-form-model-item     prop="openKind" >
                    <j-dict-select-tag type="list" v-model="model.openKind" dictCode="open_kind_type" placeholder="开仓类型" />
                  </a-form-model-item>
                </div>
              </div>
              <div class="list" >
                <div class="list-title">
                  <a-form-model-item   prop="openOnlyOne">
                    <a-switch v-model="model.openOnlyOne"/>
                  </a-form-model-item>
                </div>
              </div>
              <div class="list" >
                <div class="list-title" style='width: 100%'>
                  <a-form-model-item  prop="fixedLots">
                    <a-input-number v-model="model.fixedLots" placeholder="开仓固定手数"  style='width: 100%'/>
                  </a-form-model-item>
                </div>
              </div>
              <div class="list" >
                <div class="list-title">
                  <a-form-model-item   prop="isAutoLots">
                    <a-switch v-model="model.isAutoLots"/>
                  </a-form-model-item>
                </div>
              </div>
              <div class="list" >
                <div class="list-title"style="width: 100%" >
                  <a-form-model-item  prop="lotsRates">
                    <a-input-number v-model="model.lotsRates" placeholder="开仓手数自动计算比率（手/万$）" style="width: 100%" />
                  </a-form-model-item>
                </div>
              </div>
            </div>
          </div>
        </a-card>
        <a-card class="card" title="指标判断" :bordered="false">
          <div class="first" >
            <div class="first-list">
              <div class="list" >
                <div class="list-title">
                  DMI趋势启动点
                </div>
              </div>
              <div class="list" >
                <div class="list-title">
                  DMI趋势启动结束点
                </div>
              </div>
              <div class="list" >
                <div class="list-title">
                  多方RSI区间小值
                </div>
              </div>
              <div class="list" >
                <div class="list-title">
                  多方RSI区间大值
                </div>
              </div>
              <div class="list" >
                <div class="list-title">
                  空方RSI区间小值
                </div>
              </div>
              <div class="list" >
                <div class="list-title">
                  空方RSI区间大值
                </div>
              </div>
              <div class="list" >
                <div class="list-title">
                  允许CCI
                </div>
              </div>
              <div class="list" >
                <div class="list-title">
                  多单CCI阀值
                </div>
              </div>
              <div class="list" >
                <div class="list-title">
                  多单CCI差值（>0）
                </div>
              </div>
              <div class="list" >
                <div class="list-title">
                  空单CCI阀值
                </div>
              </div>
              <div class="list" >
                <div class="list-title">
                  空单CCI差值（>0）
                </div>
              </div>
            </div>

            <div class="first-list">
              <div class="list" >
                <div class="list-title" style='width: 100%'>
                  <a-form-model-item   prop="dmiA">
                    <a-input-number v-model="model.dmiA" placeholder="请输入DMI趋势启动点" style="width: 100%" />
                  </a-form-model-item>
                </div>
              </div>
              <div class="list" >
                <div class="list-title" style='width: 100%'>
                  <a-form-model-item  prop="dmiB">
                    <a-input-number v-model="model.dmiB" placeholder="请输入DMI趋势启动结束点" style="width: 100%" />
                  </a-form-model-item>
                </div>
              </div>
              <div class="list" >
                <div class="list-title" style='width: 100%'>
                  <a-form-model-item  prop="longRsiA">
                    <a-input-number v-model="model.longRsiA" placeholder="请输入多方RSI区间小值" style="width: 100%" />
                  </a-form-model-item>
                </div>
              </div>
              <div class="list" >
                <div class="list-title" style='width: 100%'>
                  <a-form-model-item  prop="longRsiB">
                    <a-input-number v-model="model.longRsiB" placeholder="请输入多方RSI区间大值" style="width: 100%" />
                  </a-form-model-item>
                </div>
              </div>
              <div class="list" >
                <div class="list-title" style='width: 100%'>
                  <a-form-model-item  prop="shortRsiA">
                    <a-input-number v-model="model.shortRsiA" placeholder="请输入空方RSI区间小值" style="width: 100%" />
                  </a-form-model-item>
                </div>
              </div>
              <div class="list" >
                <div class="list-title" style='width: 100%'>
                  <a-form-model-item  prop="shortRsiB">
                    <a-input-number v-model="model.shortRsiB" placeholder="请输入空方RSI区间大值" style="width: 100%" />
                  </a-form-model-item>
                </div>
              </div>
              <div class="list" >
                <div class="list-title">
                  <a-form-model-item   prop="useCci">
                    <a-switch v-model="model.useCci"/>
                  </a-form-model-item>
                </div>
              </div>
              <div class="list" >
                <div class="list-title" style='width: 100%'>
                  <a-form-model-item  prop="longCciLevel">
                    <a-input-number v-model="model.longCciLevel" placeholder="请输入多单CCI阀值" style="width: 100%" />
                  </a-form-model-item>
                </div>
              </div>
              <div class="list" >
                <div class="list-title" style='width: 100%'>
                  <a-form-model-item  prop="longCciDeviation">
                    <a-input-number v-model="model.longCciDeviation" placeholder="请输入多单CCI差值（>0）" style="width: 100%" />
                  </a-form-model-item>
                </div>
              </div>
              <div class="list" >
                <div class="list-title" style='width: 100%'>
                  <a-form-model-item  prop="shortCciLevel">
                    <a-input-number v-model="model.shortCciLevel" placeholder="请输入空单CCI阀值" style="width: 100%" />
                  </a-form-model-item>
                </div>
              </div>
              <div class="list" >
                <div class="list-title" style='width: 100%'>
                  <a-form-model-item  prop="shortCciDeviation">
                    <a-input-number v-model="model.shortCciDeviation" placeholder="请输入空单CCI差值（>0）" style="width: 100%" />
                  </a-form-model-item>
                </div>
              </div>
            </div>
          </div>

        </a-card>
        <a-card class="card" title="止盈止损" :bordered="false">
          <div class="first" >
            <div class="first-list">
              <div class="list" >
                <div class="list-title">
                  止损点数
                </div>
              </div>
              <div class="list" >
                <div class="list-title">
                  动态止损点（波动率）
                </div>
              </div>
              <div class="list" >
                <div class="list-title">
                  止盈点数
                </div>
              </div>
              <div class="list" >
                <div class="list-title">
                  移损点数
                </div>
              </div>
              <div class="list" >
                <div class="list-title">
                  移盈点数
                </div>
              </div>
              <div class="list" >
                <div class="list-title">
                  移损移盈时利润优先
                </div>
              </div>
            </div>

            <div class="first-list" >
              <div class="list" >
                <div class="list-title" style='width: 100%'>
                  <a-form-model-item  prop="stopLoss">
                    <a-input-number v-model="model.stopLoss" placeholder="请输入止损点数" style="width: 100%" />
                  </a-form-model-item>
                </div>
              </div>
              <div class="list" >
                <div class="list-title" style='width: 100%'>
                  <a-form-model-item   prop="useAutoStoploss">
                    <a-switch v-model="model.useAutoStoploss"/>
                  </a-form-model-item>
                </div>
              </div>
              <div class="list" >
                <div class="list-title" style='width: 100%'>
                  <a-form-model-item  prop="takeProfit">
                    <a-input-number v-model="model.takeProfit" placeholder="请输入止盈点数" style="width: 100%" />
                  </a-form-model-item>
                </div>
              </div>
              <div class="list" >
                <div class="list-title" style='width: 100%'>
                  <a-form-model-item  prop="moveSL">
                    <a-input-number v-model="model.moveSL" placeholder="请输入移损点数" style="width: 100%" />
                  </a-form-model-item>
                </div>
              </div>
              <div class="list" >
                <div class="list-title" style='width: 100%'>
                  <a-form-model-item  prop="moveTP">
                    <a-input-number v-model="model.moveTP" placeholder="请输入移盈点数" style="width: 100%" />
                  </a-form-model-item>
                </div>
              </div>
              <div class="list" >
                <div class="list-title" style='width: 100%'>
                <a-form-model-item   prop="profitFirstOnMoveSP">
                  <a-switch v-model="model.profitFirstOnMoveSP"/>
                </a-form-model-item>
              </div>
            </div>

            </div>
          </div>
        </a-card>
        <a-card class="card" title="超买超卖设置" :bordered="false">
          <div class="first" style='border-right:1px solid #e8e8e8'>
            <div class="first-list" >
              <div class="list" style='width: 60%'>
                <div class="list-title">
                  止损点数
                </div>
              </div>
              <div class="list"  style='width: 60%'>
                <div class="list-title">
                  动态止损点（波动率）
                </div>
              </div>
            </div>

            <div class="first-list" >
              <div class="list" style='width: 60%'>
                <div class="list-title" style='width: 100%'>
                  <a-form-model-item  prop="rsiOverBought">
                    <a-input-number v-model="model.rsiOverBought" placeholder="请输入RSI超买值" style="width: 35%" />
                  </a-form-model-item>
                </div>
              </div>
              <div class="list" style='width: 60%'>
                <div class="list-title" style='width: 100%'>
                  <a-form-model-item  prop="rsiOverSold">
                    <a-input-number v-model="model.rsiOverSold" placeholder="请输入RSI超卖值" style="width: 35%" />
                  </a-form-model-item>
                </div>
              </div>
            </div>
          </div>
        </a-card>
        <a-card class="card" title="自动平仓设置" :bordered="false">
          <div class="first" >
            <div class="first-list">
              <div class="list" >
                <div class="list-title">
                  持仓趋势反转平仓
                </div>
              </div>
              <div class="list" >
                <div class="list-title">
                  EMA反转平仓
                </div>
              </div>
              <div class="list" >
                <div class="list-title">
                  强趋势变弱平仓
                </div>
              </div>
              <div class="list" >
                <div class="list-title">
                  三色趋势反转平仓
                </div>
              </div>
            </div>

            <div class="first-list" >
              <div class="list" >
                <div class="list-title" style='width: 100%'>
                  <a-form-model-item   prop="atxTrendRevers">
                    <a-switch v-model="model.atxTrendRevers"/>
                  </a-form-model-item>
                </div>
              </div>
              <div class="list" >
                <div class="list-title" style='width: 100%'>
                  <a-form-model-item   prop="emaTrendRevers">
                    <a-switch v-model="model.emaTrendRevers"/>
                  </a-form-model-item>
                </div>
              </div>
              <div class="list" >
                <div class="list-title" style='width: 100%'>
                  <a-form-model-item  prop="dmiStrong2Weak">
                    <a-switch v-model="model.dmiStrong2Weak"/>
                  </a-form-model-item>
                </div>
              </div>
              <div class="list" >
                <div class="list-title" style='width: 100%'>
                  <a-form-model-item  prop="trendRevers3">
                    <a-switch v-model="model.trendRevers3"/>
                  </a-form-model-item>
                </div>
              </div>
            </div>
          </div>
        </a-card>
        <a-card class="card" title="趋势设置" :bordered="false">
          <div class="first" >
            <div class="first-list">
              <div class="list" >
                <div class="list-title">
                  三色趋势共振
                </div>
              </div>
              <div class="list" >
                <div class="list-title">
                  持仓趋势共振
                </div>
              </div>
              <div class="list" >
                <div class="list-title">
                  DMI趋势逐渐增强
                </div>
              </div>
              <div class="list" >
                <div class="list-title">
                  DMI趋势须比较K线柱数（值为2或3或4）
                </div>
              </div>
              <div class="list" >
                <div class="list-title">
                  DMI趋势差值
                </div>
              </div>
              <div class="list" >
                <div class="list-title">
                  EMA同方向开仓
                </div>
              </div>
              <div class="list" >
                <div class="list-title">
                  EMA同向时突破或跌破EMA线的K线柱数（值为2或3或4）
                </div>
              </div>
              <div class="list" >
                <div class="list-title">
                  K线柱走势同向
                </div>
              </div>
              <div class="list" >
                <div class="list-title">
                  比较K线柱数（值为2或3或4）
                </div>
              </div>
            </div>

            <div class="first-list" >
              <div class="list" >
                <div class="list-title" style='width: 100%'>
                  <a-form-model-item   prop="same3Trend">
                    <a-switch v-model="model.same3Trend"/>
                  </a-form-model-item>
                </div>
              </div>
              <div class="list" >
                <div class="list-title" style='width: 100%'>
                  <a-form-model-item   prop="sameAtxTrend">
                    <a-switch v-model="model.sameAtxTrend"/>
                  </a-form-model-item>
                </div>
              </div>
              <div class="list" >
                <div class="list-title" style='width: 100%'>
                  <a-form-model-item  prop="sameStrongDmi">
                    <a-switch v-model="model.sameStrongDmi"/>
                  </a-form-model-item>
                </div>
              </div>
              <div class="list" >
                <div class="list-title" style='width: 100%'>
                  <a-form-model-item  prop="sameStrongDmiNums">
                    <a-input-number v-model="model.sameStrongDmiNums" placeholder="请输入DMI趋势须比较K线柱数" style="width: 100%" />
                  </a-form-model-item>
                </div>
              </div>
              <div class="list" >
                <div class="list-title" style='width: 100%'>
                  <a-form-model-item   prop="sameStrongDmiDeviation">
                    <a-input-number v-model="model.sameStrongDmiDeviation" placeholder="请输入DMI趋势差值" style="width: 100%" />
                  </a-form-model-item>
                </div>
              </div>
              <div class="list" >
                <div class="list-title" style='width: 100%'>
                  <a-form-model-item   prop="sameEma">
                    <a-switch v-model="model.sameEma"/>
                  </a-form-model-item>
                </div>
              </div>
              <div class="list" >
                <div class="list-title" style='width: 100%'>
                  <a-form-model-item  prop="sameEmaNums">
                    <a-input-number v-model="model.sameEmaNums" placeholder="请输入EMA同向时突破或跌破EMA线的K线柱数" style="width: 100%" />
                  </a-form-model-item>
                </div>
              </div>
              <div class="list" >
                <div class="list-title" style='width: 100%'>
                  <a-form-model-item  prop="sameK">
                    <a-switch v-model="model.sameK"/>
                  </a-form-model-item>
                </div>
              </div>
              <div class="list" >
                <div class="list-title" style='width: 100%'>
                  <a-form-model-item  prop="sameKNums">
                    <a-input-number v-model="model.sameKNums" placeholder="请输入比较K线柱数（值为2或3或4）" style="width: 100%" />
                  </a-form-model-item>
                </div>
              </div>
            </div>
          </div>
        </a-card>
        <a-card class="card" title="扩展参数" :bordered="false">
          <a-button @click="handleAddParam" type="primary" icon="plus">新增</a-button>
          <div  style="margin-top: 5px" :key="index" v-for="(item, index) in othersParam" >
            <a-col :span="8">
            <a-form-model-item label="中文名" :labelCol="labelCol" :wrapperCol="wrapperCol" >
              <a-input v-model="othersParam[index].chinaName" placeholder="请输入中文名"  ></a-input>
            </a-form-model-item>
          </a-col>
            <a-col :span="8">
              <a-form-model-item label="参数名" :labelCol="labelCol" :wrapperCol="wrapperCol" >
                <a-input v-model="othersParam[index].paramName" placeholder="请输入参数名"  ></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="7">
              <a-form-model-item label="参数值" :labelCol="labelCol" :wrapperCol="wrapperCol" >
                <a-input v-model="othersParam[index].paramValue" placeholder="请输入参数值"  ></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="1">
              <a-button @click="handleSubParam(index)"  icon="minus"></a-button>
            </a-col>
          </div>
        </a-card>
      </a-form-model>
    </j-form-container>
  </a-spin>
</template>

<script>

  import { httpAction, getAction } from '@/api/manage'
  import { validateDuplicateValue } from '@/utils/util'

  export default {
    name: 'IndexArmForm',
    components: {
    },
    props: {
      //表单禁用
      disabled: {
        type: Boolean,
        default: false,
        required: false
      }
    },
    data () {
      return {
        model:{
         },
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
        confirmLoading: false,
        validatorRules: {
          sameStrongDmiNums: [{required: true,pattern:/^[234]$/,message: '只能2,3,4'}],
          sameEmaNums: [{required: true,pattern:/^[234]$/,message: '只能2,3,4'}],
          sameKNums: [{required: true,pattern:/^[234]$/,message: '只能2,3,4'}],
        },
        varietyOption:[],
        othersParam:[],
        url: {
          add: "/gongqiang/indexArm/add",
          edit: "/gongqiang/indexArm/edit",
          queryById: "/gongqiang/indexArm/queryById",
          varietyList: "/gongqiang/varietyPool/allList",
        }
      }
    },
    computed: {
      formDisabled(){
        return this.disabled
      },
    },
    created () {
       //备份model原始值
      this.modelDefault = JSON.parse(JSON.stringify(this.model));
      getAction(this.url.varietyList).then((res) => {
        if (res.success) {
          this.varietyOption=[];
          for (let i=0;i<res.result.length;i++)
          {
            let obj={};
            obj.key=res.result[i].name
            obj.value=res.result[i].name
            this.varietyOption.push(obj);
          }
        }else{
          this.$message.warning(res.message)
        }
      }).finally(() => {
        this.loading = false
      })
    },
    methods: {
      add () {
        this.edit(this.modelDefault);
      },
      edit (record) {
        debugger
        this.model = Object.assign({}, record);
        this.model.tradevariety=this.model.tradevariety.split(',');
        this.othersParam = JSON.parse(record.params);
        this.visible = true;
      },
      handleAddParam()
      {
        let obj=
          {
            chinaName:"",
            paramName:"",
            paramValue:"",
          }

          this.othersParam.push(obj);
      },
      handleSubParam(index)
      {
        this.othersParam.splice(index, 1);
      },
      submitForm () {
        const that = this;
        // 触发表单验证
        this.$refs.form.validate(valid => {
          if (valid) {
            that.confirmLoading = true;
            let httpurl = '';
            let method = '';
            if(!this.model.id){
              httpurl+=this.url.add;
              method = 'post';
            }else{
              httpurl+=this.url.edit;
               method = 'put';
            }
            this.model.tradevariety=this.model.tradevariety.join(',');
            this.model.oparams=this.othersParam;
            httpAction(httpurl,this.model,method).then((res)=>{
              if(res.success){
                that.$message.success(res.message);
                that.$emit('ok');
              }else{
                that.$message.warning(res.message);
              }
            }).finally(() => {
              that.confirmLoading = false;
            })
          }

        })
      },
    }
  }
</script>

<style lang='less' scoped>
.first {
  width: 100%;
  margin-bottom: 10px;

  .first-list {
    display: flex;

    .list {
      width: 25%;
      font-size: 14px;
      padding: 5px;
      box-sizing: border-box;
      border: 1px solid #e8e8e8;
      border-bottom: 0px solid #e8e8e8;
      display: flex;
      align-items: center;
      justify-content: center;

      .list-title {
        text-align: center;
        font-weight: bolder;
      }

      .list-title:last-child {
        cursor: pointer;
      }
    }

    .list:nth-child(1) {
      border-right: 0px;
    }

    .list:nth-child(2) {
      border-right: 0px;
    }

    .list:nth-child(3) {
      border-right: 0px;
    }

    .list:first-child {
     // width: 40%;
    }
  }

  .first-list:first-child {
    background: #fafafa;
  }

  .first-list {
    font-weight: bolder;
  }


  .first-list:last-child {
    border-bottom: 1px solid #e8e8e8;
  }
}


/deep/ .card
{
  margin-top: -30px;
}

/deep/ .ant-form-item
{
  margin-bottom:0px;
}
</style>